
import React, { Component } from "react";
import { Map, Marker, NavigationControl, Circle, CustomOverlay, Label } from 'react-bmapgl';
import AutoComplete from 'react-bmapgl/Services/AutoComplete'
import { CloseOutlined } from '@ant-design/icons';
import { Button, InputNumber, Input, Select, Divider, message } from 'antd';
const markPoint = [
    { "lng": 108.89650215463763, "lat": 34.23516643378701, "address": "陕西省西安市雁塔区唐延路23号", "resourceName": "救护车", "resourceId": 209, "resourceSum": "1", "unit":'辆',  "range":8 },
    { "lng": 108.89663128605469, "lat": 34.235107676802066, "address": "陕西省西安市雁塔区唐延路23号", "resourceName": "避难所", "resourceId": 181, "resourceSum": "10", "unit":'处',"range":9 },
    { "lng": 108.89649429446445, "lat": 34.23516083803089, "address": "陕西省西安市雁塔区唐延路23号", "resourceName": "消防站", "resourceId": 242, "resourceSum": "1", "unit":'个',"range":18 },
    { "lng": 108.89652857474182, "lat": 34.23532736302904, "address": "陕西省西安市雁塔区唐延路23号", "resourceName": "医院", "resourceId": 210, "resourceSum": "1", "unit":'个',"range":28 },
    { "lng": 108.89682547594428, "lat": 34.234814835692575, "address": "陕西省西安市雁塔区科技一路58号", "resourceName": "甲级写字楼", "resourceId": 44, "resourceSum": "10", "unit":'栋',"range":48 },
    { "lng": 108.89706066495322, "lat": 34.23578492793177, "address": "陕西省西安市雁塔区唐延路9号", "resourceName": "紧急指挥中心", "resourceId": 150, "resourceSum": "10", "unit":'个',"range":98},
    { "lng": 108.89742535854232, "lat": 34.233632580141844, "address": "陕西省西安市雁塔区科技一路20号", "resourceName": "紧急指挥中心", "resourceId": 149, "resourceSum": "10", "unit":'个',"range":198 },
    { "lng": 108.89794408420849, "lat": 34.23893446738079, "address": "陕西省西安市雁塔区唐兴路9号", "resourceName": "加油站", "resourceId": 151, "resourceSum": "15", "unit":'个',"range":498 },
    { "lng": 108.88864553021511, "lat": 34.23726042127724, "address": "陕西省西安市雁塔区团结南路10号", "resourceName": "消防中心", "resourceId": 153, "resourceSum": "15", "unit":'个',"range":998 },
    { "lng": 108.90402608622121, "lat": 34.25054334723368, "address": "陕西省西安市莲湖区二环南路西段-395号", "resourceName": "避难所", "resourceId": 154, "resourceSum": "15", "unit":'处',"range":1999 },
    { "lng": 108.88844166403825, "lat": 34.22029011916204, "address": "陕西省西安市雁塔区沣惠南路34号", "resourceName": "加气站", "resourceId": 156, "resourceSum": "15", "unit":'个',"range":1999 },
    { "lng": 108.88352622637366, "lat": 34.27556811845646, "address": "陕西省西安市莲湖区大庆路651号", "resourceName": "加油站", "resourceId": 157, "resourceSum": "10", "unit":'个',"range":4998 },
    { "lng": 108.93062331700885, "lat": 34.20260146526296, "address": "陕西省西安市雁塔区521家属医院", "resourceName": "医院", "resourceId": 158, "resourceSum": "20", "unit":'个',"range":4998 },
    { "lng": 108.8736726883049, "lat": 34.315273880786684, "address": "陕西省西安市未央区邓六路", "resourceName": "公园", "resourceId": 159, "resourceSum": "1", "unit":'个',"range":10000 },
    { "lng": 108.95075116250474, "lat": 34.90721294211546, "address": "陕西省铜川市耀州区长虹南路辅路", "resourceName": "公园", "resourceId": 184, "resourceSum": "1", "unit":'个',"range":100000 },
    { "lng": 109.51294089298197, "lat": 34.501721524137295, "address": "陕西省渭南市临渭区朝阳大街21号", "resourceName": "机关单位", "resourceId": 195, "resourceSum": "1", "unit":'处',"range":100000 },
    { "lng": 108.25204898819545, "lat": 34.532977835013426, "address": "陕西省咸阳市乾县东大街148号", "resourceName": "商业中心", "resourceId": 198, "resourceSum": "1", "unit":'个',"range":100000 },
    { "lng": 109.1582032919856, "lat": 33.42824184888231, "address": "陕西省商洛市镇安县南新街34号", "resourceName": "医院", "resourceId": 201, "resourceSum": "1", "unit":'个',"range":100000 },
    { "lng": 116.40401031088727, "lat": 39.91445974905955, "address": "北京市东城区西长安街", "resourceName": "广场", "resourceId": 259, "resourceSum": "1", "unit":'个',"range":1000000 },
    { "lng": 106.59476975853936, "lat": 29.57293184522584, "address": "重庆市渝中区朝东路1号", "resourceName": "商业中心", "resourceId": 289, "resourceSum": "1", "unit":'个',"range":1000000 },
    { "lng": 112.96766415308835, "lat": 28.238555708681933, "address": "湖南省长沙市岳麓区潇湘北路", "resourceName": "公园", "resourceId": 219, "resourceSum": "1", "unit":'个',"range":1000000 },
]
const types = [
    { 
        "label": "社会资源", 
        "options": [
            { "value": '救护车', "label": "救护车" },
            { "value": '医院', "label": "医院" },
            { "value": '消防站', "label": "消防站" },
        ]
    },
    { 
        "label": "避难所", 
        "value": '避难所'
    },
    { 
        "label": "紧急指挥中心", 
        "value": '紧急指挥中心'
    },    
    { 
        "label": "资源站点", 
        "options": [
            { "value": '加油站', "label": "加油站" },
            { "value": '加气站', "label": "加气站" },
        ]
    },   
    { 
        "label": "基础设施", 
        "options": [
            { "value": '商业中心', "label": "商业中心" },
            { "value": '机关单位', "label": "机关单位" },
            { "value": '公园', "label": "公园" },
            { "value": '甲级写字楼', "label": "甲级写字楼" },
        ]
    },     
]
export default class extends Component {
    constructor(props) {
        super(props);
        this.state = {
            visible: false,
            marks: [],
            address: '',
            resourceName: '',
            resourceSum: 0,
            markLng: '108.896551',
            markLat: '34.235115',
            range: 10,
            currentLat:'',
            currentLat:'',
            pointAddress:'',
            unit:'',
            call:0
        };
    }

    componentDidMount() {
        // this.getMarks();
    }

    getMarks = () => {
        this.setState({ marks: markPoint });
    }

    getFilterMarks = () =>{
        const { range } = this.state;
        let filterMarks = markPoint.filter((item) => item.range <= range )
        this.setState({ marks: filterMarks })
    }

    onChangeCall = value => {
        this.setState({call:value});
    };
    
    callResource = () =>{
        message.success('资源调用成功!');
        this.setVisible(false);
    }

    getWindow = () => {
        const { visible, address, resourceName, resourceSum, call, unit } = this.state;
        return (
            <>
                {
                    visible && (
                        <div style={{ width: 360, backgroundColor: '#fff', border: '1px solid #ccc', padding: '10px 10px', zIndex: '99999999999999999999999', position: 'relative', top: 45, left: 160 }}>
                            <div>位置: <CloseOutlined onClick={() => { this.setVisible(false) }}  style={{ fontSize:25, float: 'right' }} /></div>
                            <div style={{ marginLeft: 10 }}>{address}</div>
                            <div>资源情况:</div>
                            <div style={{ height: 35, verticalAlign: 'middle', marginLeft: 10 }}>{resourceName}:<span>{resourceSum} {unit}</span></div>
                            <div> 调用: <span>{resourceSum}</span></div>
                            <div style={{ marginTop: 10, textAlign: 'center' }}>
                                <Button style={{ marginLeft: 20 }} onClick={()=>{
                                    this.callResource()
                                }} type="primary">调用</Button>
                                <Button style={{ marginLeft: 20 }} onClick={() => {
                                    this.setVisible(false);
                                }} >关闭</Button>
                            </div>
                        </div>
                    )
                }
            </>
        )
    }
    setVisible = (bool) => {
        this.setState({ visible: bool })
    }

    setAddress = (address) => {
        this.setState({ address: address });
    }

    setUnit = (u) => {
        this.setState({ unit: u });
    }

    setResourceName = (resourceName) => {
        this.setState({ resourceName: resourceName });
    }

    setResourceSum = (resourceSum) => {
        this.setState({ resourceSum: resourceSum });
    }

    setMarkLng = (lng, lat) => {
        this.setState({ markLng: lng, markLat: lat });
    }

    onChangeRange = e => {
        const { value } = e.target;
        this.setState({ range: value },()=>{
            this.getFilterMarks();
        });

    };

    onChanges = (value) =>{
        this.setState({selected:value},()=>{
            let filterMarks = markPoint.filter((item) => item.resourceName === value )
            this.setState({ marks: filterMarks });
        });
    }

    render() {
        const { marks, markLng, markLat, range, currentLng, currentLat, pointAddress } = this.state;

        return (
            <>
                <div>
                    <div style={{ margin: '10px 0' }}>
                        <label style={{ marginLeft: 10 }}>距离: </label><Input style={{ width: 150 }} placeholder="距离" value={range} onChange={this.onChangeRange} onPressEnter={() => {
                        }} />米
                        <label style={{ marginLeft: 30 }}>资源类型: </label>
                        <Select
                            showSearch
                            placeholder="请选择资源类型"
                            style={{ width: 150 }}
                            onSelect={this.onChanges}
                            options={types}
                        >
                        </Select>                        
                        <label style={{ marginLeft: 10 }}>经度: </label><Input style={{ width: 180 }} placeholder="当前经度" value={currentLng} /> 
                        <label style={{ marginLeft: 10 }}>纬度: </label><Input style={{ width: 180 }} placeholder="当前纬度" value={currentLat} /> 
                        <label style={{ marginLeft: 10 }}>当前位置: </label><Input style={{ width: 260 }} placeholder="当前位置" value={pointAddress} /> 
                        {/* <AutoComplete
                            zIndex={9999999999999}
                            location='中国'
                            onHighlight={e => {console.log(e)}}
                            onConfirm={e => {
                                let _value = e.item.value;
                                let  myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
                                console.log('fffff', myValue);
                            }}
                        /> */}
                        <Button style={{ marginLeft: 20 }} onClick={() => {
                            this.getFilterMarks();
                        }} type="primary">查询</Button>
                    </div>
                    <Divider />
                    <Map style={{    width: '94%',height: 600,margin: '0 auto',border: '1px solid #ddd'}}  center={{ lng: 108.896551, lat: 34.235115 }} zoom='15' enableScrollWheelZoom 
                        onClick={(e)=>{
                            this.setState({
                                currentLng: e.latlng.lng,
                                currentLat: e.latlng.lat,
                            },()=>{
                            var myGeo = new window.BMapGL.Geocoder();
                            myGeo.getLocation(new window.BMapGL.Point(e.latlng.lng, e.latlng.lat),(res) =>{
                                if(res){
                                    console.log('位置',res.address);
                                    this.setState({  pointAddress: res.address });
                                }
                            });
                            });
                        }}>
                        <Circle
                            autoViewport
                            center={{ lng: 108.896551, lat: 34.235115 }}
                            radius={range}
                            strokeColor="#f00"
                            strokeOpacity={0.5}
                            strokeWeight={2}
                            fillColor="#ff0"
                            fillOpacity={0.1}
                        />

                        <Label
                            position={{ lng: 108.896551, lat: 34.235115 }}
                            text="事件发生地"
                            offset={new window.BMapGL.Size(-30, 20)}
                            style={{ color: '#1890ff', borderColor: '#1890ff' }}
                        />
                        {
                            marks && marks.map((item, index) => {
                                return (
                                    <Marker key={index}
                                        onClick={(e) => {
                                            console.log('点击了point===>', item, e.currentTarget.latLng.lat, e.currentTarget.latLng.lng);
                                            this.setVisible(true);
                                            this.setAddress(item.address);
                                            this.setUnit(item.unit);
                                            this.setResourceName(item.resourceName);
                                            this.setResourceSum(item.resourceSum);
                                            this.setMarkLng(e.currentTarget.latLng.lng, e.currentTarget.latLng.lat);

                                        }} position={{ lng: item.lng, lat: item.lat }} />
                                )
                            })
                        }
                        <CustomOverlay position={{ lng: markLng, lat: markLat }}>
                            {this.getWindow()}
                        </CustomOverlay>
                        <Marker position={{ lng: 108.896551, lat: 34.235115 }} isTop={true} icon={'location'} />
                        <Marker position={{lng: parseFloat(currentLng), lat: parseFloat(currentLat)}} isTop={true} icon={'loc_blue'} />
                        <NavigationControl />
                        {/* <InfoWindow position={{lng: 116.402544, lat: 39.928216}} text="内容" title="标题"/> */}
                    </Map>
                </div>
            </>
        )
    }
}
